import React from "react";
import { Card, Row, Col, Table, message, Modal, Button } from "antd";

import Echarts from "echarts/lib/echarts";
// 按需加载 bar
import "echarts/lib/chart/line";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";
import "echarts/lib/component/markPoint";

import ReactEcharts from "echarts-for-react";

import Theme from "../../config/echartThemeConfig";
import "./index.less";
interface IProp {}
interface IState {}

class EChart extends React.Component<IProp, IState> {
	constructor(props: IProp, state: IState) {
		super(props, state);
		this.state = {};
	}

	// 主题颜色要在组件加载前注入
	componentWillMount() {
		Echarts.registerTheme("MyTheme", Theme);
	}

	render() {
		const option1 = {
			title: {
				text: "这是折线图"
			},
			tooltip: {
				trigger: "axis" // 'item' | 'axis' | 'none'
				// axisPointer: {
				// 	type: "cross" // 默认为直线，可选为：'line' | 'shadow' | "cross"
				// }
			},
			xAxis: [
				{
					type: "category", // 'value' | 'category' | 'time' | 'log'
					boundaryGap: false, // boolean | ['20%', '20%']
					data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
				}
			],
			yAxis: {
				type: "value"
			},
			series: [
				{
					name: "数据1",
					type: "line",
					smooth: false,
					data: [10, 52, 200, 334, 390, 330, 220]
				}
			]
		};

		const option2 = {
			tooltip: {
				trigger: "axis"
			},
			legend: {
				type: "scroll", // string  ,  'plain' | 'scroll'
				left: 110, // number | string  ,  0 | 'auto',
				data: ["数据1", "数据2", "数据3"]
			},
			xAxis: [
				{
					type: "category",
					boundaryGap: false, // boolean | ['20%', '20%']
					data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
				}
			],
			yAxis: {
				type: "value"
			},
			series: [
				{
					name: "数据1",
					type: "line",
					data: [40, 52, 200, 334, 350, 320, 240]
				},
				{
					name: "数据2",
					type: "line",
					data: [60, 80, 180, 354, 350, 310, 260]
				},
				{
					name: "数据3",
					type: "line",
					data: [30, 66, 210, 364, 370, 310, 290]
				}
			]
		};

		const option3 = {
			tooltip: {
				trigger: "axis"
			},
			xAxis: [
				{
					type: "category",
					data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
				}
			],
			yAxis: {
				type: "value"
			},
			series: [
				{
					name: "数据1",
					type: "line",
					areaStyle: {},
					data: [40, 52, 200, 334, 350, 320, 240]
				}
			]
		};

		return (
			<div>
				<Card title="折线图" className="button-wrap">
					<Row>
						<Col span={24}>
							<ReactEcharts option={option1} theme="MyTheme" style={{ height: "500px" }}></ReactEcharts>
						</Col>
					</Row>
				</Card>
				<Card title="多条折线图" className="button-wrap">
					<Row>
						<Col span={24}>
							<ReactEcharts option={option2} theme="MyTheme" style={{ height: "500px" }}></ReactEcharts>
						</Col>
					</Row>
				</Card>
				<Card title="面积图" className="button-wrap">
					<Row>
						<Col span={24}>
							<ReactEcharts option={option3} theme="MyTheme" style={{ height: "500px" }}></ReactEcharts>
						</Col>
					</Row>
				</Card>
			</div>
		);
	}
}

export default EChart;
